// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


/*
 * @fileoverview Template for QuickConstruction model.
 *
 * @author jasonstredwick@google.com (Jason Stredwick)
 */


{namespace bite.layer.soy.QuickConstruction}


/**
 * Returns a link tag for the view.
 * @param baseUrl Base url for relative links.
 */
{template .getView}
<link rel="stylesheet" type="text/css"
      href="
        {if $baseUrl}
          {$baseUrl}
        {/if}
        styles/quick_construction.css">
</link>
{/template}


/**
 * Defines the model for the quick construction console that allows users to
 * add custom layers the layer managed by the layer server.
 */
{template .getModel}
<div id="layer-quick-construction-console" class="layer-console">
  <div class="layer-console-title">Layer Construction</div>

  <div class="layer-console-body">
    <fieldset>
      <ol>
        <li>
          <label for="layer-quick-construction-name"
                 class="layer-console-input-label">Name</label>
          <input id="layer-quick-construction-name"
                 type="text" maxlength="100" size="30" value="">

        <li>
          <fieldset class="layer-console-radio-fieldset">
            <label class="layer-console-input-label">Enabled</label>
            <ol>
              <li>
                <label for="layer-quick-construction-enabled-always">
                  Always
                </label>
                <input id="layer-quick-construction-enabled-always"
                       type="radio" name="enabled">
              <li>
                <label for="layer-quick-construction-enabled-on">On</label>
                <input id="layer-quick-construction-enabled-on"
                       type="radio" name="enabled">
              <li>
                <label for="layer-quick-construction-enabled-off">Off</label>
                <input id="layer-quick-construction-enabled-off"
                       type="radio" name="enabled">
            </ol>
          </fieldset>

        <li>
          <fieldset class="layer-console-radio-fieldset">
            <label class="layer-console-input-label">On-demand</label>
            <ol>
              <li>
                <label for="layer-quick-construction-ondemand-on">On</label>
                <input id="layer-quick-construction-ondemand-on"
                       type="radio" name="ondemand">
              <li>
                <label for="layer-quick-construction-ondemand-off">Off</label>
                <input id="layer-quick-construction-ondemand-off"
                       type="radio" name="ondemand">
              <li>
                <label for="layer-quick-construction-ondemand-never">
                  Never
                </label>
                <input id="layer-quick-construction-ondemand-never"
                       type="radio" name="ondemand">
            </ol>
          </fieldset>

        <li>
          <select id="layer-quick-construction-code-select">
            <option value="background-js">Background Javascript Code</option>
            <option value="content-js">Content-side Javascript Code</option>
            <option value="content-css">Content-side CSS Code</option>
          </select>
          <div></div>
          <textarea id="layer-quick-construction-code">
          </textarea>
          <!-- Hidden textareas are intended for temporary storage. -->
          <textarea style="display:none"
                    id="layer-quick-construction-js-bg">
          </textarea>
          <textarea style="display:none"
                    id="layer-quick-construction-js-cs">
          </textarea>
          <textarea style="display:none"
                    id="layer-quick-construction-css">
          </textarea>

      </ol>
    </fieldset>
  </div>

  <div class="layer-console-footer">
    <button id="layer-quick-construction-save" type="button">Save</button>
    <button id="layer-quick-construction-close"
            class="layer-console-button-right" type="button">Close</button>
    <button id="layer-quick-construction-reset"
            class="layer-console-button-right" type="button">Reset</button>
  </div>
</div>
{/template}

